<template>
  <div id="wangeditor">
    <div ref="editorElem" id="wang"></div>
  </div>
</template>

<script>
    import config from '@/util/editorConfig'

    export default {
        name: "index",
        data() {
            return {
                editor: null,
                editorContent: ''
            };
        },
        props: ['catchData', 'height', 'htmlContent'], // 接收父组件的方法
        mounted() {
            let Editor = window.wangEditor;
            this.editor = new Editor("#wang");
            this.editor.customConfig ={...config};
            // 编辑器的事件，每次改变会获取其html内容
            this.editor.customConfig.onchange = html => {
                this.editorContent = html;
                this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
            };
            this.editor.create(); // 创建富文本实例
            let ele = document.getElementsByClassName('w-e-text-container')[0];
            //初始化-高度 - 内容
            ele.setAttribute('style', `height:${this.height}px;border:1px solid #ccc;border-top:0`)
            this.editorContent = this.htmlContent;
            this.editor.txt.html(this.editorContent)
        },
        methods: {
            getInit(htmlContent) {
                if (htmlContent) {
                    this.editorContent = this.editorContent + htmlContent
                    this.editor.txt.html(this.editorContent)
                }
                this.catchData(this.editorContent);
                this.addEvent();
            },
            //重置
            reset() {
                this.editorContent = ''
                this.editor.txt.clear()
            },
            addEvent() {
                setTimeout(() => {
                    var eleTd = document.getElementsByTagName('td');
                    for (var i = 0; i < eleTd.length; i++) {
                        eleTd[i].addEventListener('click', (e) => {
                            let target = e.target;
                            this.$emit('getElement', target.innerHTML, target.parentNode.innerHTML)
                        });
                    }
                })
            }
        }
    }
</script>

<style lang="scss">

</style>
